<template>
  <div class="comon">
    <ty-over-lay @click.native.stop :visible="forbidClick && visible" />
    <div class="toast" v-show="visible">
      <div class="icon">
        <svg v-if="isLoading" class="loading" viewBox="25 25 50 50">
          <circle cx="50" cy="50" r="20" fill="none" class="circle" />
        </svg>
        <span v-else-if="isCustom">
          <ty-icon :name="icon" />
        </span>
      </div>
      <span class="text">{{ text }}</span>
    </div>
  </div>
</template>

<script>
import TyIcon from "./ty-icon.vue";
import { usePublicApi, useTypeJudge } from "./composiable/toast";
import TyOverLay from "./ty-overlay.vue";
export default {
  name: "ty-toast",
  components: {
    TyIcon,
    TyOverLay,
  },
  setup() {
    const {
      loading,
      message,
      clear,
      custom,
      type,
      visible,
      text,
      forbidClick,
      icon,
    } = usePublicApi();
    const { isCustom, isLoading } = useTypeJudge(type);
    return {
      isLoading,
      isCustom,
      visible,
      text,
      icon,
      forbidClick,
      loading,
      message,
      custom,
      clear,
    };
  },
};
</script>

<style scoped>
.toast {
  min-height: 88px;
  width: 88px;
  max-width: 70%;
  position: fixed;
  z-index: 2002;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: pre-wrap;
  padding: 16px;
  color: #fff;
  font-size: 14px;
  border-radius: 8px;
}
.loading {
  color: #fff;
  height: 30px;
  width: 30px;
}
.circle {
  stroke: currentColor;
  stroke-width: 3;
  animation: circle 1.5s ease-in-out infinite;
}
.icon {
  height: 30px;
  width: 30px;
}
.text {
  margin-top: 8px;
}
@keyframes circle {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120;
  }
}
</style>